<template>
  <div class="home">
    <div>home</div>
    <div>{{ title }}</div>
    <div>
      -----------------------------------------------------------------------------------------------
    </div>
    <div>
      <div>测试计算属性</div>
      <button @click="btnClick">测试计算属性</button>
      <div>{{ computeds }}</div>
    </div>
    <div>
      -----------------------------------------------------------------------------------------------
    </div>
    <div>
      <div>测试子传父</div>
      <div>子组件传过来的值</div>
      <div>{{ getchildData }}</div>
    </div>
    <div>
      -----------------------------------------------------------------------------------------------
    </div>
    <homeChild
      :childrenData1="childrenData1"
      :childrenData2="computeds"
      @event="getData"
    />
  </div>
</template>

<script lang="ts">
import homeChild from "@/views/homeChild/homeChild.vue";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: { homeChild },
})
export default class Home extends Vue {
  num = 1;
  title = "1111";
  getchildData = "";
  childrenData1 = "childrenData";
  childrenData2 = 222222222;

  get computeds(): string {
    return this.num + "计算属性";
  }

  btnClick(): void {
    console.log(11111111111111);
    this.num++;
  }
  getData(e: any): void {
    console.log(e);
    this.getchildData = e;
  }

  created() {
    try {
      console.log(this.$router);
    } catch {
      console.log("error");
    }
  }
}
</script>
